<template>
  <div class="box">
    <header class="header">
      <div class="login" v-if="$store.state.users.login_state">
        <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" size="60" color="#1989fa"/>
          <router-link to="/edituser" v-if="nickname === '请设置昵称'" tag="span">
          欢迎您{{nickname}}
          </router-link>
          <span v-else>
            {{ nickname }}
            <router-link to="/edituser">
            修改信息
            </router-link>
          </span>
        <van-icon name="arrow" size="25" color="#b1afae" />
      </div>
      <div class="nologin" @click="tologin" v-else>
        <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" size="60" color="#1989fa" />
        <span>请登录</span>
        <van-icon name="arrow" size="25" color="#b1afae" />
      </div>
    </header>
    <div class="content">
      <div class="order list" @click="toorder">
        <p>我的订单</p>
        <van-icon name="arrow" size="20" color="#b1afae"  />
      </div>
        <van-grid :border="false" :column-num="4" icon-size="28">
          <van-grid-item>
            <van-image src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/ucenter/ucenter_icon_paid.png" />
            <span>代付款</span>
          </van-grid-item>
          <van-grid-item>
            <van-image src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/ucenter/ucenter_icon_receipt.png" />
            <span>待收货</span>
          </van-grid-item>
          <van-grid-item>
            <van-image src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/ucenter/ucenter_icon_received_goods.png" />
            <span>待评价</span>
          </van-grid-item>
          <van-grid-item>
            <van-image src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/ucenter/ucenter_icon_return_goods.png" />
            <span>售后/退款</span>
          </van-grid-item>
        </van-grid>
        <div class="img">
          <img src="https://img.youpin.mi-img.com/yingkebao/90337d93e628939c590fbe1a1cf338bf.gif?w=1080&h=210" alt="" width="100%">
        </div>
        <div class="order list list1" @click="toorder">
        <p>
          <img src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/ucenter/ucenter_icon_assets.png" alt="">
          我的资产
          </p>
        <van-icon name="arrow" size="20" color="#b1afae"  />
      </div>
      <div class="order list list1" @click="toorder">
        <p>
          <img src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/ucenter/ucenter_logo_pin.jpg" alt="">
          拼团
          </p>
        <van-icon name="arrow" size="20" color="#b1afae"  />
      </div>
      <div class="order list list1" @click="collect">
        <p>
          <img src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/ucenter/ucenter_icon_collection.png" alt="">
          我的收藏
          </p>
        <van-icon name="arrow" size="20" color="#b1afae"  />
      </div>
      <div class="address list list1" @click="address">
        <p>
          <img src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/ucenter/ucenter_icon_address.png" alt="">
          地址管理
          </p>
        <van-icon name="arrow" size="20" color="#b1afae"  />
      </div>
      <div class=" list list1" @click="toorder">
        <p>
          <img src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/ucenter/ucenter_icon_qualifi.png" alt="">
          资质证照
          </p>
        <van-icon name="arrow" size="20" color="#b1afae"  />
      </div>
      <div class="order list list1" @click="toorder">
        <p>
          <img src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/ucenter/ucenter_icon_protocol.png" alt="">
          协议规则
          </p>
        <van-icon name="arrow" size="20" color="#b1afae"  />
      </div>
      <div class="order list list1" @click="toorder">
        <p>
          <img src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/ucenter/ucenter_icon_feedback.png" alt="">
          帮助与反馈
          </p>
        <van-icon name="arrow" size="20" color="#b1afae"  />
      </div>
      <div class="checkout" v-if="$store.state.users.login_state">切换账户</div>
      <div class="out" @click="out" v-if="$store.state.users.login_state">
        退出登录
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Icon, NavBar, Dialog, Grid, GridItem, Image, Uploader } from 'vant'
import { getuserinfo, updateAvatar } from '@/api'
Vue.use(Icon)
Vue.use(NavBar)
Vue.use(Dialog)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Image)
Vue.use(Uploader)
export default {
  data () {
    return {
      nickname: '',
      sex: -1
    }
  },
  mounted () {
    if (localStorage.getItem('userid')) {
      // 调用获取用户信息接口 --- 提交用户id和token信息至接口，接口验证token，验证通过返回用户数据，验证不通过，说明token失效，登陆失败
      getuserinfo({
        userid: localStorage.getItem('userid'),
        token: localStorage.getItem('token')
      }).then((res) => {
        console.log(res)
        if (res.data.code === '200') {
          this.nickname = res.data.data.nickname
          this.sex = res.data.data.sex
          this.avatar = res.data.data.avatar
        }
      })
    }
  },
  methods: {
    out () {
      localStorage.removeItem('loginState')
      localStorage.removeItem('token')
      localStorage.removeItem('userid')
      localStorage.removeItem('nickname')
      this.$store.commit('users/CHANGE_LOGIN_STATE', { payload: false })
      console.log(this.$store.state.users)
      this.$router.push('/login')
    },
    afterRead (file) {
      console.log(file)
      updateAvatar({
        userid: localStorage.getItem('userid'),
        token: localStorage.getItem('token'),
        avatar: file.content
      }).then(res => {
        if (res.data.code === '10119') {
          this.$router.push('/login')
        } else {
          this.avatar = file.content
        }
      })
    },
    tologin () {
      Dialog.confirm({
        title: '声明和政策',
        message: '欢迎您来到小米有品！我们依据最新法律法规要求，制定并更新了《隐私政策》《小米有品用户协议》以及《小米账号使用协议》您需阅读并同意相关政策条款方可进行登录。',
        confirmButtonText: '同意',
        confirmButtonColor: 'rgb(132, 95, 63)',
        cancelButtonText: '不同意',
        cancelButtonColor: 'rgb(153, 153, 153)'
      }).then(() => {
        // on confirm
        this.$router.push('/login')
      }).catch(() => {
        // on cancel
      })
    },
    toorder () {
      Dialog.confirm({
        title: '声明和政策',
        message: '欢迎您来到小米有品！我们依据最新法律法规要求，制定并更新了《隐私政策》《小米有品用户协议》以及《小米账号使用协议》您需阅读并同意相关政策条款方可进行登录。',
        confirmButtonText: '同意',
        confirmButtonColor: 'rgb(132, 95, 63)',
        cancelButtonText: '不同意',
        cancelButtonColor: 'rgb(153, 153, 153)'
      }).then(() => {
        // on confirm
      }).catch(() => {
        // on cancel
      })
    },
    address () {
      Dialog.confirm({
        title: '声明和政策',
        message: '欢迎您来到小米有品！我们依据最新法律法规要求，制定并更新了《隐私政策》《小米有品用户协议》以及《小米账号使用协议》您需阅读并同意相关政策条款方可进行登录。',
        confirmButtonText: '同意',
        confirmButtonColor: 'rgb(132, 95, 63)',
        cancelButtonText: '不同意',
        cancelButtonColor: 'rgb(153, 153, 153)'
      }).then(() => {
        // on confirm
        this.$router.push('/addresslist')
      }).catch(() => {
        // on cancel
      })
    },
    collect () {
      Dialog.confirm({
        title: '声明和政策',
        message: '欢迎您来到小米有品！我们依据最新法律法规要求，制定并更新了《隐私政策》《小米有品用户协议》以及《小米账号使用协议》您需阅读并同意相关政策条款方可进行登录。',
        confirmButtonText: '同意',
        confirmButtonColor: 'rgb(132, 95, 63)',
        cancelButtonText: '不同意',
        cancelButtonColor: 'rgb(153, 153, 153)'
      }).then(() => {
        // on confirm
        this.$router.push('/collection')
      }).catch(() => {
        // on cancel
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container .box .header {
  height: 100px;
  padding: 0 20px;
  background:url('https://m.xiaomiyoupin.com/youpin/static/m/res/images/ucenter/ucenter_bg_top.png') no-repeat;
  background-size: 100% auto;
  .nologin span {
    color: white;
    margin-left: 10px;;
  }
  .van-icon-arrow {
    float: right;
    line-height: 100px;
  }
}
.content {
  background-color: #f3f3f3;
  .list {
    height: 44px;
    line-height: 22px;
    background: white;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    // border-bottom: 1px solid #b1afae;
    margin-bottom: 1px;
    img {
      width: 38px;
      height: 38px;
    }
  }
  .address {
    margin-top: 5px;
  }
  .van-image{
    width: 23px;
    margin-bottom: 5px;
  }
  .van-grid-item__content {
    span {
      color: #b1afae;
      font-size: 12px;
    }
  }
  .out, .checkout {
    // border: 1px solid black;
    width: 100%;
    height: 40px;
    // border-radius: 10px;
    text-align: center;
    line-height: 40px;
    margin: 10px auto;
    background:white;
  }
}
</style>
